'use client'

import { useState } from "react"
import { EyeIcon } from "@heroicons/react/24/outline"
import { ViewOutboundDialog } from "./view-outbound-dialog"

interface OutboundItemProps {
  sale: any // 使用序列化后的类型
}

export function OutboundItem({ sale }: OutboundItemProps) {
  const [isViewOpen, setIsViewOpen] = useState(false)

  return (
    <tr className="hover:bg-gray-50">
      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
        {sale.code}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        ¥{parseFloat(sale.totalAmount).toFixed(2)}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
        {new Date(sale.createdAt).toLocaleString()}
      </td>
      <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
        <button
          onClick={() => setIsViewOpen(true)}
          className="text-blue-600 hover:text-blue-900"
        >
          <EyeIcon className="h-5 w-5" />
        </button>
        {isViewOpen && (
          <ViewOutboundDialog
            sale={sale}
            open={isViewOpen}
            onClose={() => setIsViewOpen(false)}
          />
        )}
      </td>
    </tr>
  )
} 